<template>
    <!-- 忘记支付密码 -->
    <div class="setpaypaw">
        <!--首次输入-->
        <div v-if="!affirmpaw">
            <div style="background-color: #fff;">
                <p class="textp" style="padding-bottom: .2rem;padding-left:.3rem;text-align: left;">桃宝宝将发送验证码至您的手机:</p>
                <p style="padding-bottom: .25rem;padding-left:.3rem;text-align: left;"><span style="font-size: .28rem;">{{ mobile | getmobile }}</span><span class="sendcode-btn" :class="{'btne':sendtext != '发送验证码'}" v-text="sendtext" @click="sendcode"></span></p>
            </div>
            <div class="setpaw-box">
                <div class="paw-item">
                    <span>{{ this.pawStr1[0] }}</span>            
                    <span>{{ this.pawStr1[1] }}</span>            
                    <span>{{ this.pawStr1[2] }}</span>            
                    <span>{{ this.pawStr1[3] }}</span>            
                    <span>{{ this.pawStr1[4] }}</span>            
                    <span style="border-right: none;">{{ this.pawStr1[5] }}</span>            
                </div>
            </div>
            <div class="checki-btn setpaypaw-btn btne" v-if="pawStr1.length < 6">下一步</div>
            <div class="checki-btn setpaypaw-btn"  v-if="pawStr1.length == 6" @click="verifycode">下一步</div>
            <!--键盘-->
            <div class="keyboard">
                <div class="key-box">
                    <span class="spana" @click="getpaw(1,1)">1</span>
                    <span class="spana" @click="getpaw(2,1)">2</span>
                    <span @click="getpaw(3,1)" class="spana borderrn">3</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(4,1)">4</span>
                    <span class="spana" @click="getpaw(5,1)">5</span>
                    <span @click="getpaw(6,1)" class="spana borderrn">6</span>
                </div>
                <div class="key-box">
                    <span class="spana" @click="getpaw(7,1)">7</span>
                    <span class="spana" @click="getpaw(8,1)">8</span>
                    <span @click="getpaw(9,1)" class="spana borderrn">9</span>
                </div>
                <div class="key-box">
                    <span class="over colore" style="font-size: .32rem;"></span>
                    <span class="spana" @click="getpaw(0,1)">0</span>
                    <span class="back colore spana" @click="cancelpaw(1)">×</span>
                </div>
            </div>
        </div>     
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default{
        data:function(){
            return{
                mobile:'',
                password1:'',
                pawStr1:[],
                affirmpaw:false,
                money:'',
                current:'',
                type:'',
                sendtext:'发送验证码',
                mobile:localStorage.mobile,
                timenum:60,
                timefun:''
            }
        },
        mounted:function(){
            this.money = this.$route.query.money;
            this.current = this.$route.query.current;
            this.type = this.$route.query.type;
            this.password1= "";
            this.pawStr1 = [];
            this.sendtext = '发送验证码';
            this.mobile = localStorage.mobile;
            this.timenum = 60;
            this.timefun = '';
        },
        methods:{
            //发送验证码接口
            sendcode(){
                if(this.sendtext == "发送验证码"){
                    this.sendtext = "发送中...";
                    var _this = this;
                    this.post({
                        url:"/api/user/sendcode",
                        data:{
                            mobile:this.mobile,
                            type:6
                        }
                    }).then(response=>{
                        this.timefun = setInterval(function(){
                            _this.timeOut();
                        }, 1000); 
                    }).catch(response=>{
                        this.sendtext = "发送验证码"
                    })

                }else{
                    return
                }
            },
            //倒计时
            timeOut:function(){

                if (this.timenum <= 0) {
                    clearInterval(this.timefun);
                    this.timefun = '';
                    this.timenum = 60;
                    this.sendtext = "发送验证码";
                    return;                    
                }else{
                    this.timenum -= 1;
                    this.sendtext = this.timenum+"s后重发";                    
                }
            },                        
            //验证验证码
            verifycode(){
                this.post({
                    url:'/api/check/password/code',
                    data:{
                        mobile:this.mobile,
                        code:this.password1
                    }
                }).then(response=>{
                    this.$router.push({path:"/setpaypaw",query:{'money':this.money,'currency':this.current == 0?'charm':'money','type':this.type}});

                })
            },
            //点击获取密码值1
            getpaw(num,type){
                if(this.password1.length < 6 && type == 1){                
                    this.password1 += num.toString();  //第一次密码
                }else{
                    return
                }
                this.getpawnum(type);
                console.log(this.password1.length);
            },
            //后退取消密码
            cancelpaw(type){

                var len1 = this.password1.length - 1;

                if(this.password1.length != 0 && type == 1){
                    this.password1 = this.password1.substring(0,len1);
                }
                this.getpawnum(type);
            },
            //密码框获取密码
            getpawnum(type){
                if(type == 1){
                    this.pawStr1 = this.password1.split('');
                }
  
            }
        },
        filters:{
            getpaw:function(num){
                if(num){
                    return '*'
                }
            },
            getmobile:function(num){
                if(num){
                    var str = num.toString();
                    var str1 = str.substring(0,3);
                    var str2 = str.substring(7);
                    var str3 = str1+'****'+str2;
                    return str3
                }
            }
        }
    }
</script>
<style type="text/css">
    @import url('./account.css');
</style>